<template>
  <div class="NewChat-container">
    <div class="search-input-wrap" flat>
      <v-text-field
        solo
        hide-details
        prepend-inner-icon="mdi-magnify"
        placeholder="Search Project"
        rounded
        class="white-input"
      ></v-text-field>
    </div>
    <v-list class="pa-0" two-line>
      <div v-for="chat in syncedChats" :key="chat.id">
        <v-list-item class="px-2">
          <v-list-item-content>
            <v-list-item-title class="text-left">
              <span class="name" v-text="chat.name"></span>
            </v-list-item-title>
            <v-list-item-subtitle class="text-left">
              <span class="subtitle" v-text="chat.subtitle"></span>
            </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </div>
    </v-list>
  </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
interface IChatItem {
  id: string;
  avatar: string;
  name: string;
  subtitle: string;
  time: string;
  unreadNumber?: number;
}

@Component({
  components: {},
})
export default class NewChat extends Vue {
  @PropSync("item", { type: Array, default: () => [] })
  syncedChats!: Array<IChatItem>;
}
</script>

<style lang="scss" scoped>
@import "./NewChat.scss";
</style>
